<template>
    <el-drawer :visible.sync="drawer" direction="rtl" size="50%" :with-header="false" :width="700"
        :append-to-body="true">
        <div class="drawer_box" v-if="detail">
            <div class="drawer_title">
                <div class="drawer_t">
                    <div class="drawer_t_l">
                        <img class="drawer_t_l_img" src="/static/skin/herodoo/main/platform/home/img/piliangoumai.png"
                            alt="" />
                        查看明细
                    </div>
                    <img class="drawer_t_r" src="/static/skin/herodoo/main/platform/home/img/guanbi.png" alt=""
                        @click="drawer = false" />
                </div>
            </div>
            <div class="drawer_content">
                <text>基本信息</text>
                <div class="list-box">
                    <div class="left">投票标题:</div>
                    <div class="right">
                        {{ detail.Name }} {{ detail.VoteOptionNumber }}票 ({{ (Number(detail.VoteOptionNumber) /
                            Number(total) * 100).toFixed(2) }}%)
                        <!-- {{ totle== 0 ? 0: ((detail.VoteOptionNumber / totle) * 100).toFixed(2) }} -->
                    </div>
                </div>
                <div class="list-box">
                    <div class="left">名次:</div>
                    <div class="right">
                        {{ index }}
                    </div>
                </div>
                <text>投票明细</text>
                <div class="list-box">
                    <div class="left"></div>
                    <div class="right">
                        <el-table :data="list" style="width: 100%">
                            <el-table-column prop="" label="序号" width="60" type="index" :index="getIndex">
                            </el-table-column>
                            <el-table-column prop="CreateUserID" label="投票人" width="180">
                            </el-table-column>
                            <el-table-column prop="CreateTime" label="投票时间" width="200">
                            </el-table-column>
                        </el-table>
                        <el-pagination v-if="total > 0" background layout="prev, pager, next" :total="listtotal"
                            :current-page="currentPage" :page-size="pageSize" @current-change="handleCurrentChange">
                        </el-pagination>
                    </div>

                </div>
            </div>
        </div>
    </el-drawer>
</template>
<script>
export default {
    name: "detail",
    props: {
        messageList: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            octopus: this.$parent.$parent.octopus,
            drawer: false,
            detail: null,
            total: 0,
            index: 0,
            pageSize: 10,
            currentPage: 1,
            list: [],
            listtotal:0
        }
    },
    methods: {
        drawerOpen(item, total, index) {
            this.detail = item;
            this.total = total;
            this.index = index;
            this.drawer = true;
            this.api_1398()
        },
        api_1398() {

            this.octopus.request.api.post(
                "/Octopus/Engine/List",
                {
                    id: 1398,
                    cellData: [
                        { name: "CreateTime" },	// 创建时间
                        { name: "CreateUserID" },	// 创建人
                        { name: "ID" },	// ID
                        { name: "VoteID" },	// 投票ID
                        { name: "VoteOptionID" },	// 投票选项ID
                    ],
                    paramData: {
                        VoteID: this.messageList.ID,
                        VoteOptionID: this.detail.ID
                    },
                    pageData: {
                        index: this.currentPage,
                        rowSize: this.pageSize
                    }
                },
                data => {
                    if (data.status.code == 200) {
                        this.list = data.content.queryData;
                        this.listtotal = data.content.pageData.totalRows
                    } else {
                        this.octopus.tips.error(data);
                    }
                }
            );
        },
        handleCurrentChange(e){
            this.currentPage = e;
            this.api_1398();
        }
    }
}
</script>
<style scoped>
.drawer_box {
    padding: 3rem 0.8rem 3rem 0;
    height: calc(100% - 5rem);
    display: flex;
    flex-direction: column;
}

.drawer_title {
    box-shadow: 0px 5px 5px rgb(230 228 228 / 30%);
    padding-bottom: 1rem;
    font-size: 1.6rem;
}

.drawer_t {
    padding: 0 2.8rem;
    display: flex;
    justify-content: space-between;
}

.drawer_t_l {
    display: flex;
    align-items: center;
    font-size: 2rem;
    font-weight: bold;
}

.drawer_t_l_img {
    width: 2.8rem;
    margin-right: 1rem;
}

.drawer_t_r {
    width: 3rem;
    height: 3rem;
    cursor: pointer;
}

.button_box {
    margin-top: 1rem;
    padding: 0 3rem;
    display: flex;
}

.drawer_content {
    overflow-y: auto;
    margin-top: 1.5rem;
    height: calc(100vh - 11rem);
    padding: 0 3rem;
    width: 100%;
    padding-bottom: 1rem;
}

.drawer_content .title {
    font-size: 1.8rem;
    font-weight: bold;
}

.drawer_content .driver-title {
    margin-top: 1em;
}

.content-box {
    display: flex;
    align-items: center;
    margin: 2rem 0 2rem 2em;
}

.mt-10 {
    margin-top: 10rem;
}

.content-box .label {
    width: 25%;
    font-size: 1.6rem;
}

.content-box .label .label-bold {
    font-size: 1.8rem;
    font-weight: bold;
}

.content-box .desc {
    flex: 1;
    font-size: 1.6rem;
}

.list-box {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.list-box {
    line-height: 4rem;
    margin-top: 2rem;
}

.list-box .left {
    width: 20%;
    font-size: 1.5rem;
}

.list-box .right {
    width: 80%;
}
</style>